<template>
  <div id="app">
    <div id="list-demo" class="demo">
    <button v-on:click="shuffle">乱序</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data: function(){
    return {
      items: [1,2,3,4,5,6,7,8,9]
    }
  },
  methods: {
    shuffle: function () {
      return this.items.sort(function(a,b){ return Math.random()>.5 ? -1 : 1;})
    }
  }
}
</script>
 
<style>
  /** 方块元素的样式 **/
  .list-item {
    display: inline-block;
    margin-right: 10px;
    background-color: orange;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
  }
  /*** 元素定位改变时动画 ***/
  .list-move {
    transition: transform 1s;
  }
</style>